﻿@page "/tree-grid/header-template"

@using Syncfusion.Blazor.TreeGrid
@using Syncfusion.Blazor.Grids
@*Hidden:Lines*@
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper
@using ej2_blazor_wrapdata
@inherits SampleBaseComponent;
@*End:Hidden*@

<SampleDescription>
    <p>This sample demonstrates the usage of Header Templates in Tree Grid. In this sample, we have shown custom icons in the column headers.</p>
</SampleDescription>
<ActionDescription>
    <p>The Tree Grid provides a way to define a custom element in header element. By inducing <code>HeaderTemplate</code> sub component in the columns, which will be used as the template for the header cell.</p>
    <p>In this demo, we have rendered customized template for all the column headers.</p>
    <p>More information on the header template can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treegrid/columns/#header-template'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfTreeGrid DataSource="@TreeData" IdMapping="TaskId" ParentIdMapping="ParentId" TreeColumnIndex="0" Height="315">
                <TreeGridColumns>
                    <TreeGridColumn Field="TaskName" HeaderText="Task Name" Width="240">
                        <HeaderTemplate>
                            @{
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/task-name.png")" width="20" height="20" style="margin-right: 8px" />Task Name
                                </div>
                            }
                        </HeaderTemplate>
                    </TreeGridColumn>
                    <TreeGridColumn Field="StartDate" HeaderText="Start Date" Width="120" Type=ColumnType.Date Format="d" TextAlign="TextAlign.Right">
                        <HeaderTemplate>
                            <div class="image">
                                <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/start-name.png")" width="20" height="20" style="margin-right: 8px" />Start Date
                            </div>
                        </HeaderTemplate>
                    </TreeGridColumn>
                    <TreeGridColumn Field="Resources" HeaderText="Resources" Width="110" TextAlign="TextAlign.Right">
                        <HeaderTemplate>
                            @{
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/resources.png")" width="20" height="20" style="margin-right: 8px" />Resources
                                </div>
                            }
                        </HeaderTemplate>
                    </TreeGridColumn>
                    <TreeGridColumn Field="Duration" HeaderText="Duration" Width="110" TextAlign="TextAlign.Right">
                        <HeaderTemplate>
                            @{
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/duration.png")" width="20" height="20" style="margin-right: 8px" />Duration
                                </div>
                            }
                        </HeaderTemplate>
                    </TreeGridColumn>
                    <TreeGridColumn Field="Progress" HeaderText="Progress" Width="110" >
                        <HeaderTemplate>
                            @{
                                <div class="image">
                                    <img src="@UriHelper.ToAbsoluteUri($"images/tree-grid/progress.png")" width="20" height="20" style="margin-right: 8px" />Progress
                                </div>
                            }
                        </HeaderTemplate>
                    </TreeGridColumn>
                </TreeGridColumns>
            </SfTreeGrid>
        </div>
    </div>
</div>

@code {

    public IEnumerable<WrapData> TreeData { get; set; }

    protected override void OnInitialized()
    {
        this.TreeData = WrapData.GetWrapData().ToList();
    }
}

